import { Directive } from "vue"
import { getPermission } from "@/utils/index"

export default function permissionDirective (app){
  const permission:Directive<HTMLElement, boolean | undefined> = {
    mounted (el:HTMLElement, binding:any) {
      const id = binding.value.id
      const type = binding.value.type
      if(!id || !type) return
      if(id){
        const hasPermission = getPermission(el,id,type)
        console.log('获取hasPermission权限值',hasPermission);
        if(!hasPermission){
          // 若没有权限，移除dom元素
          if(el.parentNode){
            el.parentNode && el.parentNode.removeChild(el)
          }else {
            el.style.display = 'none'
          }
        }
      }

    }
  }
  app.directive('permission',permission)
}

// export default {
//   bind:(el:any,binding:any) => {
//     const id = binding.value.id
//     const type = binding.value.type
//     if(id){
//       const hasPermission = getPermission(el,id,type)
//       if(!hasPermission){
//         //若没有权限，移除dom元素
//         if(el.parentNode){
//           el.parentNode && el.parentNode.removeChild(el)
//         }else {
//           el.style.display = 'none'
//         }
//       }
//     }else{
//       throw new Error('需要传key')
//     }
//   }
// }